<template>
  <el-dialog
    title="总部任务模板详情"
    :visible.sync="dialogVisible"
    :modal="true"
    :appendToBody="true"
    width="800px"
    v-dialog-drag
    :close-on-click-modal="false"
    top="5vh"
    @close="handleClose()"
    @open="handleOpen()"
  >
    <el-form
      :model="form"
      :rules="rules"
      ref="ruleForm"
      label-width="120px"
      v-loading="loading"
    >
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="任务模板名称" prop="taskTemplateName">
            {{ form.taskTemplateName }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="任务类型" prop="taskType">
            {{ taskTypeOptionMap[form.taskType] || "" }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="是否品控关注" prop="isConcernedTask">
            <span v-if="form.isConcernedTask == '1'">是</span>
            <span v-if="form.isConcernedTask == '0'">否</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="关联设备分类" prop="associatedDeviceCategory">
            {{ form.associatedDeviceCategory }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="24">
          <el-form-item label="备注" prop="remark">
            {{ form.remark }}
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { getTaskTemplateDetail } from "@/api/taskMgmt/template";
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    row: {
      type: Object,
      default: null,
    },
  },
  dicts: ["taskType"],
  data() {
    return {
      loading: false,
      form: {
        taskTemplateName: null,
        taskType: null,
        isConcernedTask: "1",
        associatedDeviceCategory: null,
        remark: null,
        renderingMode: null,
      },
      rules: {},
      associatedDeviceCategoryOptions: [],
    };
  },
  computed: {
    dialogVisible: {
      set(val) {
        this.$emit("update:visible", val);
      },
      get() {
        return this.visible;
      },
    },
    taskTypeOptionMap() {
      return this.dictToMap(this.dict.taskType);
    },
  },
  methods: {
    handleClose() {
      this.$refs.ruleForm.resetFields();
    },
    handleOpen() {
      this.getDetails();
    },
    getDetails() {
      if (!this.row?.id) {
        return;
      }
      this.loading = true;
      getTaskTemplateDetail(this.row.id)
        .then((res) => {
          const {
            taskTemplateName,
            taskType,
            isConcernedTask,
            associatedDeviceCategory,
            remark,
            renderingMode,
          } = res.data;
          this.form = {
            taskTemplateName,
            taskType,
            isConcernedTask,
            associatedDeviceCategory,
            remark,
            renderingMode,
          };
          this.loading = false;
        })
        .catch(() => {
          this.form = {
            taskTemplateName: null,
            taskType: null,
            isConcernedTask,
            associatedDeviceCategory: null,
            remark: null,
          };
          this.loading = false;
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.el-select {
  width: 100%;
}
</style>
